<template>
  <div class="common-barrage">
    <div id="container" class="container">
    </div>
  </div>

</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      settime:null,
      barrageWall:null,
    };
  },
  methods: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.barrageWall = {
        container: null,
        barrageLen: null,
        lastElem: 0,
        overlapElem: -1,
        barrage: [],
        barrageOffset: [],
        init: function(option) {
          if (option.container === undefined) {
            console.error("error");
            return false;
          }
          if (option.barrageLen === undefined) {
            console.error("error");
            return false;
          }
          this.container = option.container;
          this.barrageLen = option.barrageLen;
          for (var i = 0; i < this.barrageLen; i++) {
            this.barrage[i] = new Array();
          }
        },
        upWall: function(img, user, txt) {
          if (!this.barrageLen && this.container) {
            console.error("error");
            return false;
          }
          this.positionWall();
          var elem = $("<div></div>")
            .addClass("list")
            .css("top", this.lastElem * 38 + "px")
            .html("<img src='" + img + "' alt=''/>" + user + ":" + txt)
            .appendTo(this.container);
          this.barrage[this.lastElem].push(elem);
          setTimeout(function() {
            elem.addClass("animate");
          }, 200);
          setTimeout(
            function() {
              for (var i = 0; i < this.barrage.length; i++) {
                for (var x = 0; x < this.barrage[i].length; x++) {
                  if (this.barrage[i][x] === elem) {
                    this.barrage[i].splice(x, 1);
                    break;
                  }
                }
              }
              elem.remove();
            }.bind(this),
            25000
          );
        },
        positionWall: function() {
          for (var i = 0; i <= this.barrage.length; i++) {
            if (i === this.barrage.length) {
              this.minOffset();
            } else {
              if (this.afterOffset(i)) break;
            }
          }
        },
        minOffset: function() {
          var minOffset = 0;
          for (var x = 0; x < this.barrage.length; x++) {
            var elem = this.barrage[x][this.barrage[x].length - 1];
            var aboveWidth = elem.width();
            var matrix = elem.css("transform");
            this.barrageOffset[x] =
              matrix === "none"
                ? -aboveWidth
                : -parseInt(matrix.split(",")[4]) - aboveWidth;
            minOffset =
              this.barrageOffset[x] > this.barrageOffset[minOffset]
                ? x
                : minOffset;
          }
          this.lastElem = minOffset;
        },
        afterOffset: function(i) {
          if (this.barrage[i].length === 0) {
            this.lastElem = i;
            this.overlapElem = -1;
            return true;
          } else {
            var elem = this.barrage[i][this.barrage[i].length - 1];
            var aboveWidth = elem.width();
            var matrix = elem.css("transform");
            if (matrix !== "none") {
              var aboveTransform = parseInt(matrix.split(",")[4]);
              if (-aboveTransform - aboveWidth > 50) {
                this.lastElem = i;
                this.overlapElem = -1;
                return true;
              }
            }
          }
          return false;
        }
      };
      var option = {
        container: "#container", //弹幕墙的id
        barrageLen: 5 //弹幕的行数
      };
      this.barrageWall.init(option); //初始化弹幕墙

      // 测试
      this.settime=setInterval(()=>{
        this.barrageWall.upWall("images/aq.png", "我是说话人", "我说的1a32s1df321asd3f话"); //初始化弹幕墙
      },2000)
    });
  },
  beforeDestroy(){
    clearInterval(this.settime)
    this.barrageWall=null
  }
};
</script>
<style lang="scss">
.common-barrage {
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, #f6ad36, #cf5a5d);
  .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .container .list {
    position: absolute;
    left: 100%;
    white-space: nowrap;
    height: 38px;
    line-height: 38px;
    font-size: 22px;
    color: #fff;
    text-shadow: 0 0 3px #000;
    transition: transform 20s linear;
    z-index: 999;
  }
  .container .list.animate {
    transform: translateX(-4000px);
  }
  .container .list .content {
    display: inline-block;
    opacity: 1;
  }
  .container .list img {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: text-top;
  }
}
</style>